<template>
	<view class="login-form-wrapper">
		<view class="login-input-wrapper">
			<input placeholder="用户名/手机号" v-model="username"/>
		</view>
		<view class="login-input-wrapper flexRowNoWrapBetween">
			<input placeholder="验证码" v-model="yzm"/>
			<label @click="getYzm">{{yzmText}}</label>
		</view>
		<view class="login-input-wrapper flexRowNoWrapBetween">
			<input placeholder="设置密码" :password="isPassword"  v-model="password"/>
			<label class="iconfont" :class="isPassword ? 'icon-nosee':'icon-open-eye'" @click="checkIsPassword"></label>
		</view>
		<view class="login-input-wrapper flexRowNoWrapBetween">
			<input placeholder="再次确认密码" :password="isPassword2"  v-model="password2"/>
			<label class="iconfont" :class="isPassword2 ? 'icon-nosee':'icon-open-eye'" @click="checkIsPassword2"></label>
		</view>
		<view class="login-btn-wrapper">
			<button @click="regist" :disabled="isLoading" :loading="isLoading">{{btnText}}</button>
			<!-- <button @click="reset">重置</button> -->
		</view>
		<view class="login-linker flexRowNoWrapBetween">
			<view @click="goLogin">已有账号？去登录</view>
			<!-- <view @click="goForgetPwd">忘记密码</view> -->
		</view>	
	</view>
</template>

<script>
	import {validatePhone,validateLength,validateLengthRange} from '@/utils/jk-validate.js'
	const time = 10;
	export default {
		
		data() {
			
			return {
				username: '',
				password: '',
				yzm:'',
				password2: '',
				isPassword: true,
				isPassword2: true,
				isLoading: false,
				yzmText:'获取验证码',
				btnText:'',
				flag:''
			}
		},
		onLoad(option) {
			this.flag=  option.flag
			if(this.flag == 'regist'){
				uni.setNavigationBarTitle({
					title: '注册'
				});
				this.btnText = '注册'
			}else{
				uni.setNavigationBarTitle({
					title: '忘记密码'
				});
				this.btnText = '确认'
			}	
		},
		mounted() {
				
		},
		methods: {
			// 获取验证码
			getYzm(){
				let _that = this;
				let validPhone = validatePhone(_that.username,'手机号不能为空');
				if( validPhone != 1){
					uni.showToast({
						icon:'none',
						duration:2000,
						title: validPhone
					})
					return false;
				}
				let yzmTime = time;
				 let timer = setInterval(function(){
					 yzmTime--;
					if(yzmTime > 0){
						_that.yzmText = yzmTime +'秒后再获取'
					}else{
						clearInterval(timer);
						_that.yzmText = '获取验证码'
					}
					console.log(yzmTime)
				 },1000)	 
			},
			checkIsPassword(){
				this.isPassword = !this.isPassword;
			},
			checkIsPassword2(){
				this.isPassword2 = !this.isPassword2;
			},
			regist() {
				let _that = this;
				
				let msg1 = validatePhone(_that.username,'手机号不能为空')
				let msg2 = validateLength(_that.yzm,4,'验证码不能为空','验证码不能少于4位')
				let msg3 = validateLengthRange(_that.password,6,12,'密码不能为空','密码长度在6-12位之间')
				let msg4 = validateLengthRange(_that.password2,6,12,'密码不能为空','密码长度在6-12位之间')
				
				let msgArray = [msg1,msg2,msg3,msg4];
				
				let isValid = msgArray.some((item,index) => {
					if(item != 1){
						uni.showToast({
								icon:'none',
								duration:2000,
								title: item
						})
					}
					return item != 1;
				})
				
				if(!isValid){
					if(_that.password2 === _that.password){
						_that.isLoading = true;
						setTimeout(function(){
							_that.isLoading = false;
							uni.showToast({
								icon:'none',
								duration:1000,
								title:'提交成功'
							})
							uni.navigateTo({
								url:'./login'
							})
						},2000)
						
					}else{
						uni.showToast({
							icon:'none',
							duration:1000,
							title:'两次密码不一致！'
						})
					}		
				}
			},
			reset(){
				this.username = '';
				this.password = '';
			},
			goLogin(){
				uni.navigateTo({
					url:'./login'
				})
			},
			// goForgetPwd(){
			// 	uni.navigateTo({
			// 		url:'./forgetPwd'
			// 	})
			// }
		},
		
	}
</script>

<style lang="scss">
.login-form-wrapper{
	padding: 50rpx;
	.login-input-wrapper{
		padding: 20rpx;
		border: solid 1rpx #9F9F9F;
		border-radius: 8rpx;
		&:not(:last-child){
			margin-bottom: 50rpx;
		}
	}
	.login-btn-wrapper{
		button{
			background-color: $jk-color-primary;
			color: $jk-color-white;
			&:not(:last-child){
				margin-bottom: 30rpx;
			}
		}
	}
	.login-linker{
		margin-top: 20rpx;
		font-size: 24rpx;
		color: $jk-text-color;
		text-decoration: underline;
	}
}
</style>